<template>
  <div class="login-page">
    <div class="logo"></div>
    <div class="form">
      <!-- card -->
      <el-card class="box-card">
        <h1>登录</h1>
        <!-- form表单 -->
        <el-form
          :model="numberValidateForm"
          ref="numberValidateForm"
          class="demo-ruleForm"
          :rules="rules"
        >
          <el-form-item prop="phone">
            <el-input v-model.number="numberValidateForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model.number="numberValidateForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="checkbox">
            <el-checkbox-group v-model="numberValidateForm.type">
              <el-checkbox label="用户平台使用协议" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 350px;" type="button" @click="submitForm()">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login-page',
  props: {},
  components: {},
  data () {
    const validate = (rule, value, callback) => {
      if (this.numberValidateForm.type !== true) {
        callback(new Error('您必须勾选用户的使用协议'))
      } else {
        callback()
      }
    }
    return {
      numberValidateForm: {
        phone: '13800000002',
        password: '123456',
        type: true
      },
      rules: {
        phone: [{ required: true, message: '手机号不能为空' }, { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确手机号', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空' }, { pattern: /^[0-9A-Za-z]{6,12}$/, message: '请输入6-12的密码', trigger: 'blur' }],
        checkbox: [{ validator: validate, trigger: 'change' }]
      }
    }
  },
  computed: {},
  watch: {},
  async created () {

  },
  mounted () {},
  methods: {
    async submitForm () {
      try {
        await this.$store.dispatch('user/login', { phone: this.numberValidateForm.phone, password: this.numberValidateForm.password })
        this.$router.push('/layout')
      } catch (err) {
      // console.log(err)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover,
.el-cascader__dropdown,
.el-color-picker__panel,
.el-message-box,
.el-notification {
  box-shadow: none;
  border: none;
  padding: 0;
}

::v-deep .el-card__body {
  padding: 20px;
}

.login-page {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .logo {
    flex: 3;
    background: rgba(38, 72, 176)
      url("https://heimahr-t.itheima.net/static/img/login_back.5ecbf4ab.png")
      no-repeat center/ cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 176px;

    h1 {
      padding-bottom: 20px;
      font-size: 24px;
    }
    .el-input {
      width: 350px;
      height: 44px;
      .el-input__inner {
        background: #f4f5fb;
      }
    }
    .el-checkbox {
      color: #606266;
    }
    .el-button {
      color: #fff;
      background: #2752fb;
    }
  }
}
</style>
